<template>
  <div>
    <!-- 订单模块下属六个页面
    1.订单信息(本页面) 2.超时订单 3.进出信息 4.订单评论 5.订单日志 6.物业流水 -->

    <!--查询条件 1.orderInfoState 0预定 1进行 2超时 3取消 4完成
                2.orderInfoStateFurther
                   0预定 -> 0未支付 1已支付
                   1进行 -> 0未入场 1已入场
                   2超时 -> 0未出场 1未支付
                   3取消 -> 0手动 1超时
                   4完成 -> 0未评论 1好中评 2差评未回 3差评已回
                3.stallInfo-->
    <div style="padding-bottom:5px">
      <el-select v-model="orderInfoState" placeholder="请选择订单状态" @change="showOrder2">
        <el-option value="0" label="预定(订单状态)"></el-option>
        <el-option value="1" label="进行(订单状态)"></el-option>
        <el-option value="2" label="超时(订单状态)"></el-option>
        <el-option value="3" label="取消(订单状态)"></el-option>
        <el-option value="4" label="完成(订单状态)"></el-option>
      </el-select>
    </div>

    <div style="padding-bottom:5px">
      <el-select v-model="orderSelect.orderInfoStateFurther" placeholder="请选择二级订单状态" v-if="orderInfoState==0">
        <el-option value="0" label="未支付"></el-option>
        <el-option value="1" label="已支付"></el-option>
      </el-select>
      <el-select v-model="orderSelect.orderInfoStateFurther" placeholder="请选择二级订单状态" v-if="orderInfoState==1">
        <el-option value="0" label="未入场"></el-option>
        <el-option value="1" label="已入场"></el-option>
      </el-select>
      <el-select v-model="orderSelect.orderInfoStateFurther" placeholder="请选择二级订单状态" v-if="orderInfoState==2">
        <el-option value="0" label="未出场"></el-option>
        <el-option value="1" label="未支付"></el-option>
      </el-select>
      <el-select v-model="orderSelect.orderInfoStateFurther" placeholder="请选择二级订单状态" v-if="orderInfoState==3">
        <el-option value="0" label="未支付取消"></el-option>
        <el-option value="1" label="用户取消"></el-option>
        <el-option value="2" label="车位超时取消"></el-option>
      </el-select>
      <el-select v-model="orderSelect.orderInfoStateFurther" placeholder="请选择二级订单状态" v-if="orderInfoState==4">
        <el-option value="0" label="未评论"></el-option>
        <el-option value="1" label="中好评"></el-option>
        <el-option value="2" label="差评未回"></el-option>
        <el-option value="3" label="差评已回"></el-option>
      </el-select>
      <el-input v-model="orderSelect.stallInfo" placeholder="请输入车位号" style="width:150px"></el-input>
      <el-button @click="showOrder1">查询</el-button>
    </div>

    <el-table :data="page.records">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="用户电话">
              <span>{{props.row.userInfoTel}}</span>
            </el-form-item>
            <el-form-item label="车牌号">
              <span>{{props.row.userCarPlate}}</span>
            </el-form-item>
            <el-form-item label="车辆联系人" v-if="orderInfoState==2">
              <span>{{props.row.carContacks}}</span>
            </el-form-item>
            <el-form-item label="车辆联系人电话" v-if="orderInfoState==2">
              <span>{{props.row.carContacksTek}}</span>
            </el-form-item>
            <el-form-item label="车位号" v-if="orderInfoState==4">
              <span>{{props.row.stallInfo}}</span>
            </el-form-item>
            <el-form-item label="车位类型">
              <span>{{props.row.stallType}}</span>
            </el-form-item>
            <el-form-item label="持续小时">
              <span>{{ props.row.enduHour }}</span>
            </el-form-item>
            <el-form-item label="订单价格">
              <span>{{ props.row.orderPrice }}</span>
            </el-form-item>
            <el-form-item label="添加时间">
              <span>{{ props.row.orderAddTime }}</span>
            </el-form-item>
            <el-form-item label="支付时间">
              <span>{{ props.row.orderPayTime }}</span>
            </el-form-item>
            <el-form-item label="取消时间" v-if="orderInfoState==3">
              <span>{{ props.row.orderCancelTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderInfoNum"
        width="150">
      </el-table-column>
      <el-table-column
        label="二级订单状态"
        prop="orderState"
        width="150">
      </el-table-column>
      <el-table-column
        v-if="orderInfoState==4"
        label="评论分数"
        prop="commentScore"
        width="150">
      </el-table-column>
      <el-table-column
        v-if="orderInfoState!=4"
        label="车位号"
        prop="stallInfo"
        width="150">
      </el-table-column>
      <el-table-column
        label="用户姓名"
        prop="userInfoName"
        width="150">
      </el-table-column>
      <el-table-column
        label="开始时间"
        prop="startTime"
        width="150">
      </el-table-column>
      <el-table-column
        label="结束时间"
        prop="endTime"
        width="150">
      </el-table-column>
    </el-table>

    <div style="padding-top:5px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[3,5,7]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderInfo',
  data () {
    return {
      page:[],
      orderInfoState: "0",
      orderSelect:{
        orderInfoStateFurther: "",
        stallInfo: ""
      },
      orderSelected:{
        orderInfoStateFurther: "",
        stallInfo: ""
      }
    }
  },
  methods:{
    handleSizeChange(val) {
      this.showOrderProper("",val)
    },
    handleCurrentChange(val) {
      this.showOrderProper(val,this.page.size)
    },
    showOrderProper(pageNum,pageSize){
      this.$http.get("/order/orderInfo/findOrder.certified",{
        params:{
          pageNum:pageNum==""?1:pageNum,
          pageSize:pageSize==""?3:pageSize,
          orderInfoState:this.orderInfoState,
          orderInfoStateFurther:this.orderSelected.orderInfoStateFurther,
          stallInfo:this.orderSelected.stallInfo==""?null:this.orderSelected.stallInfo
        }
      }).then(resp=>{　
        if(resp.data.flag) this.page = resp.data.data
        else this.$alert(resp.data.message)　　　　
      })
    },
    showOrder1(){
      this.orderSelected.stallInfo = this.orderSelect.stallInfo
      this.orderSelected.orderInfoStateFurther = this.orderSelect.orderInfoStateFurther
      this.showOrderProper("","")
    },
    showOrder2(){
      this.orderSelect.orderInfoStateFurther = ""
      this.orderSelected.orderInfoStateFurther = ""
      this.showOrderProper("","")
    }
  },
  created(){
    this.showOrderProper("","")
  }
}
</script>

<style>
</style>
